<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../../css/common.css">
    <style>
        html,
        body,
        #map {
            height: 100%;
            width: 100%;
        }
    </style>
</head>

<body>
    <div id="map"></div>
    <script src="../../js/common.js"></script>
    <script src="../../assets/lib/world.js"></script>
    <script>
        echarts.registerMap('world', worldMap);
        $('#map').removeAttr('_echarts_instance_');
        var mapChart = echarts.init(document.getElementById('map'));
        let option = {
            title: {
                text: '世界地图',
                left: 'center',
                top: 20
            },
            backgroundColor: '#ffffff',
            tooltip: {
                show: true
            },
            visualMap: [{
                type: 'continuous',
                bottom: "8%",
                right: "5%",
                textStyle: { color: "#73747E" },
                inRange: {
                    // 渐变颜色，从小到大
                    color: [
                        '#313695',
                        '#4575b4',
                        '#74add1',
                        '#abd9e9',
                        '#e0f3f8',
                        '#ffffbf',
                        '#fee090',
                        '#fdae61',
                        '#f46d43',
                        '#d73027',
                        '#a50026'
                    ]
                },
            }],
            geo: {
                map: 'world',
            },
            series: [
                {
                    name: '测试',
                    type: "map",
                    mapType: "world",
                    itemStyle: {
                        // areaColor: '#F0BDFF', // 地图背景色
                    },
                    emphasis: {
                        itemStyle: {
                            areaColor: '#F0BDFF', // 地图hover时的背景色
                        }
                    },
                    data: [
                        { name: "Afghanistan", value: 297 },
                        { name: "United States of America", value: 297 },
                        { name: "Angola", value: 195 },
                        { name: "Albania", value: 315 },
                        { name: "Argentina", value: 844 }
                    ],
                },
            ],
        }
        mapChart.setOption(option);

    </script>

</body>

</html>